<template>
  <div>
    <!-- 技术领域分类分析 -->
    <PanelChart>
      <template slot="header">
        <div class="header">
          <i class="iconfont icon-hangyedongtai"></i>
          <h4>技术领域分类分析</h4>
          <div class="tools">
            <!-- <button @click="exportData(1)"><i class="el-icon-download"></i>导出数据</button> -->
            <button @click="saveImg(1)"><i class="el-icon-download"></i>保存图片</button>
          </div>
        </div>
      </template>
      <template slot="tip">
        <p class="tip">IPC技术分类作为专利所属技术领域的一个重要标引，能够有效的确定主要的技术分支分布情况。</p>
      </template>
      <template slot="config">
        <div>
          <div class="date-box">
            <span class="tit">起止时间：</span>
            <div class="search-time">
              <div class="picker-box">
                <el-date-picker
                  v-model="startDate1"
                  size="small"
                  placeholder="开始日期"
                  prefix-icon="date-prefix"
                  :clearable="false"
                  :picker-options="pickerStart1"
                  class="el-date-picker"
                  @change="changestartDate1">
                </el-date-picker>
                <i class="icon el-icon-date"></i>
              </div>
              <span class="split"></span>
              <div class="picker-box">
                <el-date-picker
                  v-model="endDate1"
                  size="small"
                  placeholder="结束日期"
                  prefix-icon="date-prefix"
                  :clearable="false"
                  :picker-options="pickerEnd1"
                  class="el-date-picker"
                  @change="changeendDate1">
                </el-date-picker>
                <i class="icon el-icon-date"></i>
              </div>
            </div>
          </div>
          <div class="select-box">
            <span class="tit">IPC分类：</span>
            <el-select v-model="limit1" size="small" placeholder="请选择" class="select" @change="handleChangeSelect1">
              <el-option
                v-for="(item, index) in options1"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template slot="chartBtn">
        <div class="chart-btn">
          <el-button v-for="(item, index) in cbtns" :key="index" :class="['btn', item.icon, {'active': cbtnActive1===item.type}]" @click="handleChangeCbtn(item, 1)"></el-button>
        </div>
      </template>
      <template slot="chart">
        <ChartE v-if="cbtnActive1==='bar'" ref="chartB1" chartId="chartFive1" :chartData="chartData1"/>
        <ChartBPie v-if="cbtnActive1==='pie'" ref="chartBPie1" chartId="chartFive_Pie1" :chartData="chartPieData1"/>
      </template>
    </PanelChart>
    <PanelTable ref="panelTable1" :tableData="tableData1" />
  </div>
</template>

<script>
import axios from 'axios'
import PanelChart from './PanelChart'
import PanelTable from './PanelTable'
import ChartE from './chart/echarts/ChartE'
import ChartBPie from './chart/echarts/ChartBPie'
import {getDate} from '@/utils/utils'
export default {
  components: {
    PanelChart,
    PanelTable,
    ChartE,
    ChartBPie
  },
  data() {
    return {
      opts: {},
      chartData1: [],
      chartPieData1: [],
      tableData1: {
        tit: [],
        content: []
      },
      startDate1: null,
      endDate1: null,
      pickerStart1: {
        disabledDate: (time) => {
          return this.disabledDate(time, this.endDate1, 'gt')
        }
      },
      pickerEnd1: {
        disabledDate: (time) => {
          return this.disabledDate(time, this.startDate1, 'lt')
        }
      },
      limit1: 10,
      options1: [
        {
          label: '前5',
          value: 5
        },
        {
          label: '前10',
          value: 10
        },
        {
          label: '前15',
          value: 15
        },
        {
          label: '前20',
          value: 20
        },
        {
          label: '前25',
          value: 25
        },
        {
          label: '前30',
          value: 30
        },
      ],
      cbtns: [
        {type: 'bar', icon: 'iconfont icon-situation'},
        {type: 'pie', icon: 'iconfont icon-bingtu'},
      ],
      cbtnActive1: 'bar',
      cancel1: null,
    }
  },
  methods: {
    init(opts) {
      this.opts = opts
      this.getChartData(1)
    },
    // 图表数据
    getChartData(i) {
      let ths = this
      if (this[`cancel${i}`]) {
        this[`cancel${i}`]()
      }
      this.$get(this.$Url.TI.technicalDomainDistribution, {
        keyword: this.opts.searchTxt || '',
        limit: this[`limit${i}`],
        start: this[`startDate${i}`] ? moment(this[`startDate${i}`]).format('YYYY-MM-DD') : '',
        end: this[`endDate${i}`] ? moment(this[`endDate${i}`]).format('YYYY-MM-DD') : ''
      }, new axios.CancelToken(function executor(c) {
        ths[`cancel${i}`] = c
      })).then(res => {
        let data = res.data
        let xArr = []
        let chartData = []
        this[`chartPieData${i}`] = data
        data.forEach(v => {
          xArr.push(v.keyAsString)
        })
        xArr.forEach(v => {
          let arr = [v]
          data.forEach(b => {
            let count = '-'
            if (b.keyAsString === v) {
              count = b.docCount
            }
            arr.push(count)
          })
          chartData.push(arr)
        })
        chartData = [
          ['product', ...xArr],
          // ['申请量', ...yArr]
          ...chartData
        ]
        this[`chartData${i}`] = chartData
        this.getTableData(data, i)
      }).catch(err => {})
    },
    // 表格数据
    getTableData(data, i) {
      this[`tableData${i}`] = {
        tname: '技术领域分类分析',
        tit: ['序列号', 'IPC小类', '专利数量'],
        content: data.map(v => {
          return [v.keyAsString, v.docCount]
        })
      }
    },
    changestartDate1(val) {
      this.startDate1 = val
      this.getChartData(1)
    },
    changeendDate1(val) {
      this.endDate1 = val
      this.getChartData(1)
    },
    handleChangeSelect1() {
      this.getChartData(1)
    },
    changestartDate2(val) {
      this.startDate2 = val
      this.getChartData(2)
    },
    changeendDate2(val) {
      this.endDate2 = val
      this.getChartData(2)
    },
    handleChangeSelect2() {
      this.getChartData(2)
    },
    disabledDate(time, year, type) {
      if (type === 'gt') {
        if (year && year !== '') {
          if (time > year) {
            return true
          }
          return false
        }
      } else if (type === 'lt') {
        if (year && year !== '') {
          if (time < year) {
            return true
          }
          return false
        }
      }
    },
    handleChangeCbtn(item, i) {
      this[`cbtnActive${i}`] = item.type
      if (this[`cbtnActive${i}`] === 'bar') {
        this.$nextTick(() => {
          this.$refs[`chartB${i}`].changeGraphType(item.type)
        })
      }else if (this[`cbtnActive${i}`] === 'pie') {
        this.$nextTick(() => {
          this.$refs[`chartBPie${i}`].changeGraphType(item.type)
        })
      }
    },
    saveImg(i) {
      if (this[`cbtnActive${i}`] === 'bar') {
        this.$refs[`chartB${i}`].downloadImg()
      } else if (this[`cbtnActive${i}`] === 'pie') {
        this.$refs[`chartBPie${i}`].downloadImg()
      }
    },
    exportData(i) {
      this.$refs[`panelTable${i}`].exportData()
    }
  },
  mounted() {
    let {startDate, endDate} = getDate(10)
    this.startDate1 = startDate
    this.endDate1 = endDate
    this.startDate2 = startDate
    this.endDate2 = endDate
  }
}
</script>

<style lang="scss" scoped>

</style>